<template>
<!--pages/topicality/youjia/youjiajisuan/youjiajisuan.wxml-->
<view class="body">
  <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20213/1/20210301103112_24050.jpeg" class="header" alt></image>
  <choose-city @chooseCity="chooseCity">
    <view class="/news/hesuanjiance/city_didian.php">
      <view class="city-name">{{city}}</view>
      <image src="/static/images/dwicon.png" class="city-icon" alt></image>
    </view>
  </choose-city>
  <view class="tabs flex">
    <view :class="'tab ' + (currentIndex ==0?'active':'')" @tap="chooseOne" data-index="0">
      按油量
    </view>
    <view :class="'tab  ' + (currentIndex ==1?'active':'')" @tap="chooseOne" data-index="1">
      按费用
    </view>
  </view>
  <view class="youliang-content common" v-if="currentIndex ==0">
    <view class="line flex center">
      <picker>
        <view class="oil_type">
          92号汽油<image src="/static/images/dwicon.png"></image>
        </view>
      </picker>
      <text class="middle">加满</text>
      <view class="input">
        <input type="number" placeholder="请输入邮箱容量">
      </view>
      <text class="unit">L</text>
    </view>
    <button class="btn" @tap="queryLitre">查询</button>
  </view>
  <view class="youliang-content common" v-if="currentIndex ==1">
    <view class="line flex center">
      <picker>
        <view class="oil_type">
          92号汽油<image src="/static/images/dwicon.png"></image>
        </view>
      </picker>
      <text class="middle">花费</text>
      <view class="input">
        <input type="number" placeholder="请输入花费金额">
      </view>
      <text class="unit">元</text>
    </view>
    <button class="btn" @tap="queryPrice">查询</button>
  </view>
</view>
</template>

<script>
import chooseCity from "../../../../component/chooseCity/chooseCity";

export default {
  data() {
    return {
      city: '深圳',
      cityCode: 'sz',
      currentIndex: 0
    };
  },

  components: {
    chooseCity
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    // 确定选择城市
    chooseCity(e) {
      this.setData({
        city: e.detail.city,
        cityCode: e.detail.cityCode
      });
    },

    chooseOne(e) {
      this.setData({
        currentIndex: e.currentTarget.dataset.index
      });
    },

    queryPrice() {
      console.log("占位：函数 queryPrice 未声明");
    },

    queryLitre() {
      console.log("占位：函数 queryLitre 未声明");
    }

  }
};
</script>
<style>
/* pages/topicality/youjia/youjiajisuan/youjiajisuan.wxss */
.body {

  padding-bottom: 110rpx;
}

.city {
  position: absolute;
  top: 26rpx;
  right: 25rpx;
  height: 50rpx;
  display: flex;
  padding: 0 15rpx;
  align-items: center;
  justify-content: center;
  line-height: 37.5rpx;
  border-radius: 187.5rpx;
  background-color: #ffffff;
}

.city-name {
  font-weight: 600;
  color: rgb(14, 20, 87);
  font-size: 26rpx;
}

.city-icon {
  width: 18rpx;
  height: 10rpx;
  margin-left: 10rpx;
}


.header {
  width: 100%;
  height: 260rpx;
  display: block;
}
.tabs .tab{
  flex: 1;
  text-align: center;
  line-height: 72rpx;
}
.tabs .active::after{
 content: '';
 display: flex;
 margin: 0 auto;
 height: 5rpx;
 width:88rpx;
 background: #3EA5FF; 
}
.line{
  margin-top: 30rpx;
}
.oil_type {
  border: 4rpx solid #000;
  text-indent: 10rpx;
  font-size: 30rpx;
  padding: 15rpx 5rpx;
  border-radius: 10rpx;
  font-weight: bold;
}
.oil_type  image{
  width: 18rpx;
  height: 10rpx;
  margin-left: 5rpx;
  margin-bottom: 5rpx;
}
.input{
  padding: 10rpx 0;
  height: 45rpx;
  line-height: 45rpx;
  border-radius: 10rpx;
  border: 4rpx solid #000;

}
.input input{
  width: 100%;
  height: 100%;
  font-size: 25rpx;
  padding-left: 10rpx;
}
.middle{
  font-size: 40rpx;
  font-weight: bold;
  margin: 0 10rpx;
}
.unit{
  margin-left: 10rpx;
  font-weight: bold;
  font-size: 40rpx;
}
.btn {
height: 64rpx;
line-height: 64rpx;
  border: 1px solid #3EA5FF;
  border-radius: 10rpx;
  padding: 0 30rpx;
  background-color: #3EA5FF;
  color: #fff;
  font-size: 30rpx;
  width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;
margin: 0 auto;
margin-top: 50rpx;
}
</style>